<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1 {
            border: 1px solid #ccc;
            width: 100px;
            height: 20px;
            background-color: red;

        }

        #box2 {
            border: 1px solid #ccc;
            width: 100px;
            height: 20px;
            background-color: red;
            display: none;
        }

        #box3 {
            display: none;
        }
        ul>li{
            width: 100%;
            height: 100px;
            list-style: none;
        }
        .licur{
            background-color:peru;
        }
    </style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div style="width: 100px;height: 100px;background-color:yellow;" id="box3"></div>
<ul id="ul">
    <li class="licur">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div id="tab">
    <div>我是第一一一一一一</div>
    <div style="display: none">我是第二二二二二二</div>
    <div style="display: none">我是第三三三三三三</div>
</div>
<script>
    window.onload = function () {
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        var ul = document.getElementById('ul');
        var lis = ul.getElementsByTagName('li');
        var tabs = document.getElementById('tab');
        var divs = tabs.getElementsByTagName('div');
        console.log(lis);
        box1.onclick = function () {
            box3.style.display = 'block';
            this.style.display = 'none';
            box2.style.display = 'block'

        };
        box2.onclick = function () {
            box3.style.display = 'none';
            this.style.display = 'none';
            box1.style.display = 'block'

        };
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function () {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                    divs[j].style.display = 'none'
                }
                lis[this.index].className = 'licur';
                divs[this.index].style.display = 'block'

            }

        }
    }
</script>
</body>
</html>